<!--
 * @Author: your name
 * @Date: 2021-07-09 09:03:22
 * @LastEditTime: 2021-11-05 14:41:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\components\TaskStatusBtn\TaskStatusBtn.vue
-->
/* 封装一个通用的状态按钮 */
<template>
  <div class="container">
    <div :class="selectClass">
      <span class="circle"></span>
    </div>
  </div>
</template>

<script>
export default {
    name: '',
    components: {},

    // 父传子
    props: {
        isClass: {
            type: Boolean,
            default: true
        },
        type: {
            type: [Number, null],
            default: null
        }
    },
    data() {
        return {}
    },
    computed: {
        label: {
            get() {
                return this.getlabel(this.type)
            }
        },

        selectClass: {
            get() {
                return this.getClass(this.type)
            }
        }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        getlabel(_type) {
            let label = ''
            if (_type == 'Three' && this.isClass) {
                label = '严重超期30天以上'
            } else if (_type == 'Default' && this.isClass) {
                label = '正常'
            } else if (_type == 'First' && this.isClass) {
                label = '创建超过21天'
            } else if (_type == 'Second' && this.isClass) {
                label = '创建21天-30天'
            }
            return label
        },

        getClass(_type) {
            let strClass = ''
            if (_type == 3 && this.isClass) {
                strClass = 'danger'
            } else if (_type == 0 && this.isClass) {
                strClass = 'normal'
            } else if (_type == 1 && this.isClass) {
                strClass = 'morethan21'
            } else if (_type == 2 && this.isClass) {
                strClass = 'observe'
            }
            return strClass
        }
    }
}
</script>

<style scoped lang="less">
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 14px;
  font-weight: 400;
  //   background-color: royalblue;
  //   width: 200px;
  //   height: 200px;
  //   background-color: royalblue;
}

.btn-text_0 {
  width: 70px;
  height: 24px;
  background: #ffe9e9;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #ee2e2e;
  text-align: center;
  line-height: 24px;
}

.morethan21 {
  display: flex;
  align-items: center;

  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4273ff;
    display: inline-block;
  }
  .title {
    font-size: 14px;
    font-weight: 400;
    color: #4273ff;
  }
}

.normal {
  display: flex;
  align-items: center;
  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #15c887;
    display: inline-block;
  }
  .title {
    font-size: 14px;
    font-weight: 400;
    color: #15c887;
  }
}

.danger {
  display: flex;
  align-items: center;
  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ee2e2e;
    display: inline-block;
  }
  .title {
    font-size: 14px;
    font-weight: 400;
    color: #ee2e2e;
  }
}

.observe {
  display: flex;
  align-items: center;
  .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ff9a2b;
    display: inline-block;
  }
  .title {
    font-size: 14px;
    font-weight: 400;
    color: #ff9a2b;
  }
}
</style>
